<template>
  <div>
    <v-header title="分类"></v-header>
    <van-search
      v-model="value"
      shape="square"
      background="#FF6347"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />
    <main>
      <div>
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            :title="item.catename"
            v-for="item in cates"
            :key="item.id"
          />
        </van-sidebar>
      </div>
      <div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item v-for="item in getSecondCates" :key="item.id" :to="'/list?type='+item.catename+'&cateid='+item.id">
            <van-image :src="'http://localhost:3000'+item.img" />
            {{ item.catename }}
          </van-grid-item>
          
        </van-grid>
      </div>
    </main>
  </div>
</template>

<script>
import { getCate_cates } from "@/request/api.js";

export default {
  data() {
    return {
      activeKey: 0,
      cates: [],
      value:''
    };
  },
  async created() {
    let cate = await getCate_cates();
    this.cates = cate.data.list;
  },
  methods:{
    onSearch(info){
      this.$router.push('/search?keyword='+info)
    }
  },
  computed: {
    getSecondCates() {
      return this.cates[this.activeKey]?this.cates[this.activeKey].children:[]
    },
  },
};
</script>

<style scoped>
main {
  display: flex;
}
</style>